<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <title>后台管理</title>


</head>
<body id="body">
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" th:fragment="adminNav">
    <div class="ui container">
        <div class="ui inverted secondary menu stackable">
            <h2 class="ui teal header item">管理后台</h2>
            <a th:href="@{/admin/index}" class="m-item  item m-mobile-hide"
               th:classappend="${navIndex == 1}? 'active':''"><i class="home icon"></i>博客</a>
            <a th:href="@{/admin/columnistPage}" class="m-item item m-mobile-hide"
               th:classappend="${navIndex == 2}? 'active':''"><i class="idea icon"></i>分类</a>
            <a th:href="@{/admin/tagPage}" class="m-item item m-mobile-hide"
               th:classappend="${navIndex == 3}? 'active':''"><i class="tags icon"></i>标签</a>
            <a th:href="@{/admin/commentPage}" class="m-item item m-mobile-hide"
               th:classappend="${navIndex == 4}? 'active':''"><i class="comment icon"></i>评论管理</a>
            <div class="right menu">
                <div class="ui dropdown item m-item m-mobile-hide">
                    <img th:src="@{/images/icon.jpg}" class="ui avatar image">
                    &nbsp;&nbsp;[[${session.user.name}]]
                    <i class="dropdown icon"></i>
                    <div class="menu ">
                        <a class="item " href="/user/logout">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a id="b1" href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--二级导航-->
<div class="ui menu attached inverted ">
    <div class="ui container">
        <a href="/admin/blog-input" class="item">发布</a>
        <a href="/admin/blogs" class="active item">列表</a>
    </div>
</div>
<!--中间内容-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui form segment inverted">
            <div class="fields inline">
                <div class="field">
                    <input type="text" name="title" placeholder="标题">
                </div>
                <div class="field">
                    <div class="ui selection dropdown">
                        <input type="hidden" name="columnId">
                        <i class="ui dropdown icon"></i>
                        <div class="default text">分类</div>
                        <div class="menu">
                            <div class="item" th:each="type,iterStat:${cList}" th:data-value="${type.getId()}"
                                 th:text="${type.getName()}"></div>
                        </div>
                    </div>
                </div>

                <div class="field right aligned">
                    <button class="ui small teal basic button" onclick="search()"><i class="search icon"></i>搜索
                    </button>
                </div>
            </div>
        </div>
        <div id="table-container">
            <table th:fragment="table_refresh" th:id="id_table_refresh" class="ui table inverted celled center aligned">
                <thread>
                    <tr>
                        <th></th>
                        <th>标题</th>
                        <th>分类</th>
                        <th>更新时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thread>
                <tbody>
                <tr th:each="blog,iter:${pageInfo.getList()}">
                    <input type="hidden" name="maxPage" th:value="${pageInfo.getPages()}">
                    <td th:text="(${iter.index}+1)">1</td>
                    <td th:text="${blog.getTitle()}">【一年总结】记我的大一生活</td>
                    <!--                    th:text="${blog.getType().getName()}"-->
                    <td>一年总结</td>
                    <td th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd')}">2020-7-04 15:12</td>
                    <!--                    <td th:text="${blog.getBlogState()==0}?'草稿':'已发布'">草稿</td>-->
                    <td th:if="${blog.getBlogState()==0}">草稿</td>
                    <td th:if="${blog.getBlogState()==1}">已发布</td>
                    <td th:if="${blog.getBlogState()==-1}">已删除</td>

                    <td>
                        <a class="ui button  teal basic mini " th:href="@{'/admin/editBlog/'+${blog.getId()}}">编辑</a>
                        <button class="ui button  red basic mini " th:attr="data-id=${blog.getId()}"
                                onclick="deleteBlog(this)">删除
                        </button>

                    </td>

                </tr>


                </tbody>
                <tfoot>
                <tr>
                    <th colspan="6">
                        <div class="ui pagination menu mini">
                            <a onclick="pre()" class="ui item ">上一页</a>
                            <a onclick="next()" class="ui item ">下一页</a>
                        </div>
                        <a th:href="@{/admin/blogAddPage}" class="ui mini right floated teal basic button">新增</a>
                    </th>
                </tr>
                </tfoot>

            </table>
        </div>
    </div>
</div>
<div class="ui divider "></div>
<!--底部footer-->
<div th:replace="~{index::footer}"></div>


<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/Semantic-UI-CSS-master/semantic.min.js"></script>
<script type="text/javascript">

    $("#b1").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });


    $('.ui.dropdown').dropdown({
        on: 'hover'
    })


    // 页面默认数据
    var pageNum = 1;

    // 搜索
    function search() {
        // 搜索重置当前页
        pageNum = 1;
        loadData();
    }

    function next() {
        if (pageNum >= $("[name='maxPage']").val()) {
            return;
        }
        pageNum++;
        loadData();
    }

    function pre() {
        if (pageNum <= 1) {
            pageNum = 1;
            return;
        }
        pageNum--;
        loadData();
    }

    function loadData() {
        $.ajax({
            url: "/admin/findCondition",
            // type 专栏 分类
            data: {"pageNum": pageNum, title: $("[name='title']").val(), columnId: $("[name='columnId']").val(),},
            type: "get",
            success: function (result) {

                // 只刷新博客展示部分，其他地方不变
                // ajax返回数据的时候，页面模板只需要返回对应数据片段就可以
                $("#table-container").html(result);
            }
        })
    }

    function deleteBlog(button) {
        $.ajax({
            url: "/admin/delBlog",
            data: {
                "id": $(button).attr("data-id"),
                "pageNum": pageNum, title: $("[name='title']").val(), columnId: $("[name='columnId']").val(),
            },
            type: "delete",
            success: function (result) {
                $("#table-container").html(result);
            }
        })
    }


</script>
</body>
</html>